<template>
  <view class="group-container">
    <view class="member-container">
      <!-- 成员头像 + 占位符容器 -->
      <view class="avatar-list">
        <!-- 遍历真实成员 -->
        <view 
          class="avatar-item" 
          v-for="(item, index) in displayMembers" 
          :key="index"
          @click="handleAvatarClick(index)"
        >
          <image class="avatar" :src="item.avatar"></image>
          <!-- 删除图标：点击头像后显示 -->
          <view class="delete-icon-wrap" v-show="activeDeleteIndex === index">
            <uni-icons
              type="trash"
              size="20"
              class="delete-icon" 
              @click="handleDelete(index, item.name)"
            ></uni-icons>
          </view>
          <text class="name">{{ item.name }}</text>
        </view>

        <!-- 末尾固定占位符：无论有无数据，始终显示 -->
        <view class="placeholder-item" @click="openMemberPopup">
          <view class="placeholder-icon"></view>
        </view>
      </view>

      <!-- 查看更多按钮 -->
      <view 
        class="show-more" 
        v-if="totalMembers.length > maxDisplayCount" 
        @click="showAll = !showAll"
      >
        {{ showAll ? '收起部分成员' : '查看更多群成员' }}
      </view>
    </view>
	
	<view class="group-info">
	  <view class="info-item" @click="openNamePopup">
	    <text class="info-label">群聊名称</text>
	    <text class="info-value">{{ groupName }}</text>
	  </view>
	  <view class="info-item" @click="openQrCodePopup">
	    <text class="info-label">群二维码</text>
	    <text class="info-value">点击查看</text>
	  </view>
	  <view class="info-item" @click="openAnnouncePopup">
	    <text class="info-label">群公告</text>
	    <text class="info-value">{{ groupAnnounce }}</text>
	  </view>
	  <view class="info-item" @click="clearChatRecords">
	    <text class="info-label">清除聊天记录</text>
	    <text class="info-value">></text>
	  </view>
	</view>
	

    <!-- 群聊名称修改弹出层 -->
    <uni-popup ref="namePopup" type="center" @close="closeNamePopup">
      <view class="name-popup-content">
        <view class="name-popup-header">
          <text class="name-popup-title">修改群聊名称</text>
          <view class="name-popup-close" @click="closeNamePopup">
            <uni-icons type="close" size="24" color="#999"></uni-icons>
          </view>
        </view>
        <view class="name-popup-body">
          <input v-model="tempGroupName" maxlength="20" class="name-input" placeholder="请输入新的群聊名称" />
          <view class="name-save-view" @click="saveGroupName">保存</view>
        </view>
      </view>
    </uni-popup>

    <!-- 群二维码查看弹出层 -->
    <uni-popup ref="qrCodePopup" type="center" @close="closeQrCodePopup">
      <view class="qr-popup-content">
        <view class="qr-popup-header">
          <text class="qr-popup-title">群二维码</text>
          <view class="qr-popup-close" @click="closeQrCodePopup">
            <uni-icons type="close" size="24" color="#999"></uni-icons>
          </view>
        </view>
        <view class="qr-popup-body">
          <image :src="qrCodeUrl" class="qr-code-img"></image>
        </view>
      </view>
    </uni-popup>

    <!-- 群公告修改弹出层 -->
    <uni-popup ref="announcePopup" type="center" @close="closeAnnouncePopup">
      <view class="announce-popup-content">
        <view class="announce-popup-header">
          <text class="announce-popup-title">修改群公告</text>
          <view class="announce-popup-close" @click="closeAnnouncePopup">
            <uni-icons type="close" size="24" color="#999"></uni-icons>
          </view>
        </view>
        <view class="announce-popup-body">
          <textarea v-model="tempGroupAnnounce" 
		  maxlength="150" class="announce-textarea"
		   placeholder="请输入新的群公告"/>
          <view class="announce-save-view" @click="saveGroupAnnounce">保存</view>
        </view>
      </view>
    </uni-popup>

    <!-- 选择成员弹出层 -->
    <uni-popup ref="memberPopup" type="bottom" @close="closeMemberPopup">
      <view class="popup-content">
        <view class="popup-header">
          <view class="popup-title">选择成员</view>
          <view class="popup-close" @click="closeMemberPopup">
            <uni-icons type="close" size="24" color="#999"></uni-icons>
          </view>
        </view>
        <scroll-view 
          class="member-scroll" 
          scroll-y 
          show-scrollbar="false"
        >
          <view 
            class="popup-item" 
            v-for="(popupItem, popupIndex) in popupMembers" 
            :key="popupIndex"
            @click="handlePopupItemClick(popupItem)"
          >
            <image class="popup-avatar" :src="popupItem.avatar"></image>
            <text class="popup-name">{{ popupItem.name }}</text>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
  
  <!-- 退出群聊按钮 -->
  <view class="exit-group-btn" @click="exitGroup">
    退出群聊
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 群聊基础信息
const groupName = ref('程序猿大本营');
const qrCodeUrl = ref('');
const groupAnnounce = ref('【公告】申明本群不具备任何商业性质，建立本群旨在为大家营造一个纯粹、和谐的交流环境。');
const tempGroupName = ref('');
const tempGroupAnnounce = ref('');

// 成员数据
const totalMembers = ref([
  { name: '拙野', avatar: '/static/logo.png' },
  { name: '源', avatar: '/static/logo.png' },
  { name: '月落…', avatar: '/static/logo.png' },
  { name: 'Resolve', avatar: '/static/logo.png' },
  { name: '徐杰明', avatar: '/static/logo.png' },
  { name: '948', avatar: '/static/logo.png' },
  { name: 'TheLi…', avatar: '/static/logo.png' },
  { name: 'T', avatar: '/static/logo.png' },
  { name: 'F.', avatar: '/static/logo.png' },
  { name: '苏木(…', avatar: '/static/logo.png' },
  { name: 'WWL', avatar: '/static/logo.png' },
  { name: 'Re.', avatar: '/static/logo.png' },
  { name: '小红帽', avatar: '/static/logo.png' },
  { name: 'L', avatar: '/static/logo.png' },
  { name: '所谓…', avatar: '/static/logo.png' },
  { name: 'freed…', avatar: '/static/logo.png' },
  { name: '郑', avatar: '/static/logo.png' },
  { name: 'Zzz.', avatar: '/static/logo.png' },
]); 

// 模拟弹出层成员数据
const popupMembers = ref([
  { name: '八宝', avatar: '/static/logo.png' },
  { name: '白袍', avatar: '/static/logo.png' },
  { name: '贝姐', avatar: '/static/logo.png' },
  { name: '曹操', avatar: '/static/logo.png' },
  { name: '貂蝉', avatar: '/static/logo.png' },
  { name: '董卓', avatar: '/static/logo.png' },
  { name: '甘宁', avatar: '/static/logo.png' },
  { name: '关羽', avatar: '/static/logo.png' },
  { name: '黄盖', avatar: '/static/logo.png' },
  { name: '黄忠', avatar: '/static/logo.png' },
  { name: '华佗', avatar: '/static/logo.png' },
  { name: '姜维', avatar: '/static/logo.png' },
]);

// 显示控制
const maxDisplayCount = ref(15);
const showAll = ref(false);
const activeDeleteIndex = ref(-1);
const selectedMember = ref(null);

// 弹出层引用
const namePopup = ref(null);
const qrCodePopup = ref(null);
const announcePopup = ref(null);
const memberPopup = ref(null);

// 计算要显示的成员
const displayMembers = computed(() => {
  return showAll.value 
    ? totalMembers.value 
    : totalMembers.value.slice(0, maxDisplayCount.value);
});

// 群聊名称管理
const openNamePopup = () => {
  tempGroupName.value = groupName.value;
  namePopup.value.open();
};
const closeNamePopup = () => {
  namePopup.value.close();
};
const saveGroupName = () => {
  groupName.value = tempGroupName.value;
  closeNamePopup();
  uni.showToast({
    title: '群聊名称修改成功',
    icon: 'none',
    duration: 2000
  });
};

// 群二维码管理
const openQrCodePopup = () => {
  qrCodePopup.value.open();
};
const closeQrCodePopup = () => {
  qrCodePopup.value.close();
};

// 群公告管理
const openAnnouncePopup = () => {
  tempGroupAnnounce.value = groupAnnounce.value;
  announcePopup.value.open();
};
const closeAnnouncePopup = () => {
  announcePopup.value.close();
};
const saveGroupAnnounce = () => {
  groupAnnounce.value = tempGroupAnnounce.value;
  closeAnnouncePopup();
  uni.showToast({
    title: '群公告修改成功',
    icon: 'none',
    duration: 2000
  });
};

// 成员管理
const handleAvatarClick = (index) => {
  activeDeleteIndex.value = activeDeleteIndex.value === index ? -1 : index;
};

const handleDelete = (index, name) => {
  uni.showModal({
    title: '提示',
    content: `是否要删除 ${name} 用户？`,
    success: (res) => {
      if (res.confirm) {
        totalMembers.value.splice(index, 1);
        activeDeleteIndex.value = -1;
      }
    }
  });
};

const openMemberPopup = () => {
  memberPopup.value.open();
};

const closeMemberPopup = () => {
  memberPopup.value.close();
};

const handlePopupItemClick = (member) => {
  selectedMember.value = member;
  closeMemberPopup();
  
  uni.showModal({
    title: '确认邀请',
    content: `确定要邀请 ${member.name} 加入群聊？`,
    confirmText: '确认',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        const isAlreadyAdded = totalMembers.value.some(
          item => item.name === member.name
        );
        
        if (!isAlreadyAdded) {
          totalMembers.value.push(member);
          
          uni.showToast({
            title: `已邀请 ${member.name} 加入群聊`,
            icon: 'none',
            duration: 2000
          });
        } else {
          uni.showToast({
            title: `${member.name} 已在群聊中`,
            icon: 'none',
            duration: 2000
          });
        }
      }
    }
  });
};

// 清除聊天记录
const clearChatRecords = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清除聊天记录吗？清除之后就找不回来了',
    confirmText: '确认清除',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        // 这里可以添加实际的清除聊天记录逻辑
        uni.showToast({
          title: '聊天记录已清除',
          icon: 'none',
          duration: 2000
        });
      }
    }
  });
};

// 退出群聊
const exitGroup = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出当前群聊吗？',
    confirmText: '确认退出',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        // 这里可以添加实际的退出群聊逻辑
        uni.showToast({
          title: '已退出群聊',
          icon: 'none',
          duration: 2000
        });
        // 退出后可以返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    }
  });
};
</script>

<style lang="less" scoped>
.group-container {
  padding: 10rpx;
  background-color: #f0f0f0;
  position: relative;
  min-height: 100vh; /* 确保内容足够长，以便固定底部按钮 */
}

.group-info {
  background-color: #fff;
  margin-top: 10rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-label {
  font-size: 28rpx;
  color: #333;
}

.info-value {
  font-size: 28rpx;
  color: #666;
  max-width: 500rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-container {
  margin-top: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}

.avatar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10rpx 0;
}

.avatar-item {
  width: 160rpx;
  margin: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  object-fit: cover;
}

.name {
  margin-top: 6rpx;
  font-size: 28rpx;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delete-icon-wrap {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 4rpx;
  box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.delete-icon {
  font-size: 36rpx;
  color: #f00;
}

.placeholder-item {
  width: 160rpx;
  margin: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.placeholder-icon {
  width: 120rpx;
  height: 120rpx;
  border: 2rpx dashed #ccc;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.placeholder-icon::before {
  content: '+';
  font-size: 40rpx;
  color: #ccc;
}

.show-more {
  text-align: center;
  color: #007aff;
  font-size: 28rpx;
  padding: 15rpx 0;
  cursor: pointer;
}

.name-popup-content,
.announce-popup-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.name-popup-header,
.announce-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.name-popup-title,
.announce-popup-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.name-popup-close,
.announce-popup-close {
  padding: 10rpx;
  cursor: pointer;
}

.name-popup-body,
.announce-popup-body {
  padding: 30rpx;
  padding-bottom: 15rpx; /* 调整底部内边距 */
}

.name-input,
.announce-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  height: 50px;
  padding: 0 20rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.announce-textarea {
  min-height: 200rpx;
  padding: 20rpx;
}

/* 修复保存按钮超出边界的问题 */
.name-save-view,
.announce-save-view {
  width: calc(100% - 60rpx); /* 宽度减去左右边距 */
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  font-size: 28rpx;
  border-radius: 8rpx;
  margin: 0 30rpx 15rpx; /* 左右和底部边距 */
  cursor: pointer;
}

.qr-popup-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.qr-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.qr-popup-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.qr-popup-close {
  padding: 10rpx;
  cursor: pointer;
}

.qr-popup-body {
  padding: 30rpx;
  text-align: center;
}

.qr-code-img {
  width: 300rpx;
  height: 300rpx;
  object-fit: cover;
  margin: 20rpx 0;
}

.popup-content {
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
  height: 70vh;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.popup-close {
  padding: 10rpx;
  cursor: pointer;
}

.member-scroll {
  height: calc(70vh - 80rpx);
}

.member-scroll::-webkit-scrollbar {
  display: none;
}

.popup-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.popup-item:hover {
  background-color: #f8f8f8;
}

.popup-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  object-fit: cover;
}

.popup-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 退出群聊按钮样式 */
.exit-group-btn {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600rpx;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #ff4d4f;
  color: #fff;
  text-align: center;
  font-size: 32rpx;
  border-radius: 44rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
  z-index: 10;
}
</style>    